<template>
  <div class="my-checkbox-root">
    <input class="my-checkbox" type="checkbox" :id="randomId"
      :checked="modelValue" @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"/>
    <label :for="randomId">{{ label ?? (modelValue ? 'Yes' : 'No') }}</label>
  </div>

</template>

<script setup lang="ts">
defineProps<{
  modelValue: boolean
  label?: string
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', event: boolean): void,
}>()
const randomId = randomName()
</script>

<style lang="scss">

input.my-checkbox[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  background: 0;
  position: fixed;
  opacity: 0;
  border: none;
}

input.my-checkbox[type="checkbox"]+label {
  line-height: 13px;
}

input.my-checkbox[type="checkbox"]:focus+label {
  outline: 1px dotted #000000;
}

input.my-checkbox[type="checkbox"]+label {
  position: relative;
  margin-left: var(--checkbox-total-width);
}

input.my-checkbox[type="checkbox"]+label::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--checkbox-total-width-precalc)));
  display: inline-block;
  width: var(--checkbox-width);
  height: var(--checkbox-width);
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  margin-right: var(--radio-label-spacing);
  top: 50%;
  transform: translateY(-50%);
}

input.my-checkbox[type="checkbox"]:active+label::before {
  background: var(--surface);
}

input.my-checkbox[type="checkbox"]:checked+label::after {
  content: "";
  display: block;
  width: var(--checkmark-width);
  height: var(--checkmark-width);
  position: absolute;
  left: calc(-1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left));
  background: url("ui/checkmark.svg");
  top: 50%;
  transform: translateY(-50%);
}

input.my-checkbox[type="checkbox"][disabled]+label::before {
  background: var(--surface);
}

input.my-checkbox[type="checkbox"][disabled]:checked+label::after {
  background: svg-load("/ui/checkmark-disabled.svg");
}
</style>